<template>
    <el-select
      class="input-default-width w-container"
      clearable
      size="large"
      placeholder="组别"
    >
      <el-option
        v-for="item in data"
        :key="item"
        :label="item.groupDescribe"
        :value="item.groupId"
      ></el-option>
    </el-select>
  </template>
  
  <script  setup>
  import { ref, onMounted } from "vue";
  import { GetGroupsDownApi } from "@/api/manage/competition";
  const data = ref([]);
  const handleInit = async () => {
    let res = await GetGroupsDownApi();
    if (res.success) {
      data.value = res.entityList;
    }
  };
  onMounted(() => {
    handleInit();
  });
  </script>
  
  <style lang="scss" scoped>
  .w-container {
    --el-input-width: 132px !important;
    :deep(.el-input) {
      --el-input-width: 132px !important;
    }
    :deep .el-select__selection {
      width: 132px !important;
    }
  }
  </style>